<template>
  <div class="pages-booklist">
    <page-cover
      title="我的书单📚"
      subtitle="一个老百姓的自我修养"
      bg="https://dongping-blog.oss-cn-hangzhou.aliyuncs.com/systemImage/c268a944141d4f17b77a8a23de8752bd.png"
    ></page-cover>

    <main>
      <div v-loading="loading" class="booklist">
        <book-item @click="findDetail" :lists="bookList"></book-item>
      </div>
    </main>

    <book-detail
      :bookDetail="bookDetail.data"
      v-model="bookDetail.show"
    ></book-detail>
  </div>
</template>

<script>
import bookItem from "@/components/book-item/book-item.vue";
import uiDialog from "@/components/ui-dialog/ui-dialog.vue";
import pageCover from "@/components/page-cover/page-cover";
import bookDetail from "@/components/book-detail/book-detail";
import ColorThief from "colorthief";

export default {
  name: "WorkspaceJsonHome",
  components: {
    bookItem,
    uiDialog,
    pageCover,
    bookDetail,
  },
  data() {
    return {
      bookDetail: {
        show: false,
        data: {},
      },
      loading: true,
      bookList: [],
      bookNum: 0,
    };
  },

  mounted() {
    this.getBooklist();
  },

  methods: {
    getBooklist() {
      this.$http("getBooklist", { pageSize: 1000 }).then(async (res) => {
        this.bookList = res.data.lists;
        this.bookNum = res.data.total;
        this.loading = false;
      });
    },
    async findDetail(item) {
      this.bookDetail.data = item;
      this.bookDetail.show = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.pages-booklist {
  height: 100%;
  cursor: pointer;
}

main {
  max-width: 1200px;
  margin: -80px auto 0;
  padding: 0 10px;
  .booklist {
    min-height: 70vh;
    padding: 100px 10px 100px;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
    border-radius: 6px;
    position: relative;
  }
}
</style>
